{// 涂鸦数据加载容器}
<ul class="list-group" id="js__data"></ul>
{// 固定涂鸦写入按钮}
<div class="aurora-fixed-tooler">
    <h3>
        <a href="javascript:;" id="write_lnk" class="badge badge-pill badge-success" title="Shift+T 写入您的涂鸦，登录系统以后会自动识别您">
            <i class="fa fa-bolt"></i>
            涂鸦
        </a>
    </h3>
</div>

<!-- Modal 涂鸦表单 -->
<div class="modal fade" id="write_ds" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa fa-pencil-square"></i> 新增涂鸦</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {// 表单}
                <form>
                    <div class="form-group">
                        <label class="col-form-label" for="inputContent">内容</label>
                        <textarea class="form-control is-valid" id="inputContent" rows="4" name="content"></textarea>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-2">
                            <label for="inputSign">署名</label>
                            <input type="text" class="form-control" id="inputSign" name="sign">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="inputCity">城市</label>
                            <input type="text" class="form-control" id="inputCity" name="city">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="inputAddress">地址</label>
                            <input type="text" class="form-control" id="inputAddress" name="address">
                        </div>
                    </div>
                </form>
                {// 运行状态栏}
                <div class="progress invisible">
                    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="write_ds_save">保存</button>
            </div>
        </div>
    </div>
</div>

{// 浮动层}
<div id="float-ds">
    <div class="card bg-dark text-white" style="width: 30rem;">
        <div class="card-body">
            <h4 class="card-title">Joshua Conero</h4>
            <h6 class="card-subtitle mb-2 text-right">2017年11月21日 星期二</h6>
            <p class="card-text">make a dynamic card.</p>
            <!--<a href="#" class="card-link">Card link</a>-->
            <!--<a href="#" class="card-link">Another link</a>-->
        </div>
    </div>
</div>